import { useState } from 'react';
import '../index.scss'

// 父子通信 
// 1. props 只读
const App = () => {

    const [msg, setMsg] = useState('')

    const values = '我是传递的值'

    interface SonProps {
        aaa: string;
        age: number;
        isTrue: boolean;
        list: Array<number>;
        obj: object;
        func: () => void;
        jsx?: React.ReactNode;
        children?: React.ReactNode; // 添加 children 属性
        abc: (msg: string) => void;
    }

    function Son(props: SonProps) {
        console.log(props)
        return (
            <div>
                {/* 子组件 */}
                <div>我是子组件***{props.aaa}***{props.jsx}</div>
                {props.children} {/* 渲染子元素 */}
                {/* 子传父  核心 在子组件中调用父组件的函数传递实参 */}
                <button onClick={() => props.abc('123')}>我是子组件按钮</button>
            </div>
        )
    }

    return (
        <div className="app">
            {/* 父组件 */}
            <Son
                // 父传子 核心 给父组件标签添加属性，子组件通过props接收
                aaa={values}
                age={18}
                isTrue={true}
                list={[1, 2, 3]}
                obj={{ name: '张三', age: 18 }}
                func={() => { console.log('我是函数') }}
                jsx={<div>this is div</div>}
                abc={e => setMsg(e)}
            >
                <span>this is span</span>
                <p>{msg}</p>
            </Son>
        </div>
    )
}

export default App